<template>
  <div>
    <div class="div1">
      <h4>公告</h4>
      <div class="div2">
        <p v-for="(value,index) of info" :key="index">{{ value }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BulletinBoard",
  data() {
    return {
      info: ['2015-08-06陈琴《中华经典素读范本》上下12册', '2020-01-19广州教与学教辅', '陈琴《中华经典素读范本》上下12册'],
    }
  },

}
</script>

<style scoped>
.div1 {
  width: 760px;
  margin-left: 350px;
  height: 19px;
  overflow: hidden;
  /*margin: auto;*/
  position: relative;
  top: -24em;
  border: solid 1px lightgray;
  /* padding: 7px; */
  background: #e7e7e7;
}

@keyframes anis {
  100% {
    transform: translateY(-200px)
  }
}

img {
  position: absolute;
}

.div2 {
  animation: anis 5s linear infinite;
  margin-left: 4em;
}

.div2:hover {
  animation-play-state: paused;
}

h4 {
  width: 53px;
  height: 50px;
  background: #fefefe;
  text-align: center;
}
</style>